<template>
  <el-row :gutter="20">
    <el-card class="box-construction" shadow="always">
      <div class="box-title box-title-position">
        <div>质量考核管理</div>
        <el-button
          class="add-btn"
          size="medium"
          type="primary"
          @click="addQuality()"
          >添加考核成绩</el-button
        >
      </div>
      <div class="right-box">
        <el-table
          border
          v-loading="loading"
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          style="width: 100%"
        >
          <el-table-column
            prop="name"
            label="姓名"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="month"
            label="时间"
            width="100"
          ></el-table-column>
          <el-table-column prop="qualitySpotId" label="考勤内容">
            <template slot-scope="scope">
              <span class="html-content" v-html="scope.row.spot.name"></span>
            </template>
          </el-table-column>
          <el-table-column prop="score" label="分数" width="100">
          </el-table-column>
          <el-table-column prop="memo" label="备注" width="150">
             <template slot-scope="scope">{{ scope.row.memo?scope.row.memo:'--' }}</template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="box-page"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pagination.currentPage"
          :page-sizes="[5, 10, 20, 30, 40]"
          :page-size="pagination.pageSize"
          layout="total,sizes, prev, pager, next"
          :total="pagination.total"
        ></el-pagination>
      </div>
    </el-card>
    <EditForm
      ref="editForm"
      :title="formTitle"
      :datas.sync="editRow"
      :usersData.sync="usersData"
      :options.sync="editOptions"
      :visible.sync="visible"
      :baseStyle="baseStyle"
      @saveForm="submit"
    />
  </el-row>
</template>
<script>
import staNewAPI from "@apis/statisticsNew";
import orgAPI from "@apis/organize";
import perAPI from "@apis/performance";
import { mapState } from "vuex";
import EditForm from "./editForm/index";
export default {
  data() {
    return {
      orgid: "", //获取右边数据所需要的部门id
      loading: false,
      tableData: [],
      pagination: {
        currentPage: 1,
        pageNo: 1,
        pageSize: 5,
        total: 0,
      },

      visible: false,
      formTitle: "添加考核成绩",
      editRow: {},
      usersData: [],
      editOptions: [],
      baseStyle: {
        width: "140px",
      },
    };
  },
  components: {
    EditForm,
  },
  computed: {
    ...mapState({
      userInfo: "auth",
    }),
    Height() {
      return document.documentElement.clientHeight - 110;
    },
  },
  created() {
    this.loading = true;
    this.getTableList();
    this.getUserList();
  },
  mounted() {},
  methods: {
    //右边考核数据
    getTableList(val = 1) {
      staNewAPI
        .getAppraiseQualityAdditionScore({
          pageno: val,
          pagesize: this.pagination.pageSize,
        })
        .then((res) => {
          // console.log(res, "res");
          this.pagination = {
            currentPage: res.pageNo,
            pageNo: res.pageNo,
            pageSize: res.pageSize,
            total: res.total,
          };
          this.tableData = [...res.rows];
          this.loading = false;
        })
        .catch((err) => {
          // this.tableData = [];
          this.loading = false;
          console.log(err, "err");
          this.$message.error(err.message);
        });
    },
    //控制每页条数
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.loading = true;
      this.getTableList();
    },
    //分页
    handleCurrentChange(val) {
      this.loading = true;
      this.getTableList(val);
    },
    //弹窗user数据
    getUserList() {
      staNewAPI
        .getUsers({ pageNo: 1, pageSize: 1000, deleted: 0 })
        .then((res) => {
          this.usersData = [...res.rows];
        })
        .catch((err) => this.$message.error(err.message));
    },
    addQuality() {
      //弹窗考核点数据
      staNewAPI
        .getAppraiseQualitySpot()
        .then((res) => {
          // console.log(res, "res");
          this.editOptions = [...res.rows];
          this.visible = true;
        })
        .catch((err) => {
          console.log(err, "err");
          this.$message.error(err.message);
        });
    },
    submit(val) {
      // console.log(val);
      staNewAPI
        .getAppraiseQualityAddition(val)
        .then((res) => {
          this.loading = true;
          this.getTableList();
        })
        .catch((err) => this.$message.error(err.message));
    },
  },
};
</script>
<style lang="scss" scoped>
.box-title-position {
  position: relative;
  .add-btn {
    position: absolute;
    right: 15px;
    top: -3px;
  }
}
.custom-tree-node {
  font-size: 14px;
}
.right-box {
  min-height: 40px;
  margin-top: 30px;
  .box-page {
    text-align: right;
    padding-top: 40px;
  }
}
</style>